<template lang="html">
  <div>
    <div class="search">
        <div class="input">
            <p><label>质检人员姓名：</label><el-input placeholder="请输入内容" v-model="pageData.name"></el-input></p>
             <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
       <el-button type="primary" @click="add">新增</el-button>
    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row,1)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
        <slot>
              <el-form :model="pageData" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="质检人员姓名" prop="qualityUserName">
                    <el-input v-model="pageData.qualityUserName" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="质检类型" prop="qualityType">
                     <el-input v-model="pageData.qualityType" placeholder="请输入内容"></el-input>
                  </el-form-item>
                   <el-form-item label="	已经质检数量" prop="qualityNum">
                       <el-input v-model="pageData.qualityNum" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="	质检满意度" prop="qualityPercent">
                        <el-input v-model="pageData.qualityPercent" placeholder="请输入内容"></el-input>
                     </el-form-item>
                     <el-form-item label="	质检人员描述" prop="qualityUserDesc">
                         <el-input v-model="pageData.qualityUserDesc" placeholder="请输入内容"></el-input>
                      </el-form-item>
                     <el-form-item label="质检人员头像">
                       <el-upload
                          class="upload-demo"
                          ref="upload"
                          :limit="1"
                          :action="uploadingImg"
                          :on-change="changeImgFile"
                          :http-request='custom'
                          :file-list="fileList"
                          :on-exceed="exceed"
                          list-type="picture"
                          :auto-upload="false">
                          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                          <el-button style="margin-left: 10px;" size="small" type="success" @click="custom">上传到服务器</el-button>
                        </el-upload>
                      </el-form-item>
                  <el-form-item class="confirm">
                     <el-button type="primary" v-if="btnState == '1'" @click="upForm('post')">提交</el-button>
                     <el-button type="primary" v-if="btnState == '2'" @click="upForm('put')">更新</el-button>
                  </el-form-item>
              </el-form>
        </slot>
      </dialogVue>
  </div>
</template>

<script>
  import Data from './qualityUserData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import { getToken } from '@/utils/auth'
  import { Base64 } from 'js-base64';
  import {
    qualityUserList,
    delQualityUser,
    addQualityUser,
    upLoadingImg
  } from "@/api/shoppingCentre/shoppingCentre";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
      this.getqualityUserList();
    },
    methods : {
      getqualityUserList (data) {
        this.pageData.loading = true;
          qualityUserList(data).then(res=>{
            if (res.data.code == 'OK') {
              this.pageData.loading = false;
              this.total = res.data.data.total;
              this.list.tbody = res.data.data.records.map(item=>{
                 item.gmtCreate = this.switchTime(item.gmtCreate)
                 item.gmtUpdate = this.switchTime(item.gmtUpdate)
                 return item;
              });
            } else {
               setTimeout(()=>{
                 this.pageData.loading = false;
               },2000)
            }
          })
      },
      add () {
        this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
        this.fileList = [];
        this.pageData = {};
        this.btnState = '1';
        this.dialog = true;
      },
      search () {
        var data = {
          qualityUserName : this.pageData.name
        }
        this.getqualityUserList(data);
      },
      changeData (data) {
        this.dialog = data;
      },
      handSize (val) {
        var data = {
          qualityUserName : this.pageData.name,
          current : val,
        }
        this.getqualityUserList(data);
      },
      handleEdit (item) {
        this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
        this.fileList = [];
        this.btnState = '2'
        this.dialog = true;
        var temp = {
          name : '',
          url : item.qualityUserAvatar
        }
        this.pageData.qualityUserName = item.qualityUserName;
        this.pageData.qualityType = item.qualityType;
        this.pageData.qualityUserDesc = item.qualityUserDesc;
        this.pageData.qualityNum = item.qualityNum;
        this.pageData.qualityPercent = item.qualityPercent;
        this.pageData.qualityUserId = item.qualityUserId
        this.fileList.push(temp)
      },
      details (item) {
        this.$router.push({
          name : 'addAttributeVal',
          query : {
            id : item.attrId
          }
        })
      },
      del (item) {
        this.delMessage(()=>{
          var id = [];
          id.push(item.qualityUserId)
          delQualityUser(id).then(res=>{
            if (res.data.code == 'OK') {
              this.$message.success('删除成功');
                this.getqualityUserList();
            } else {
              this.$message.error(res.data.message);
            }
          })
        })
      },
      exceed (files, fileList) {
        this.$message.error("只能传一张图片");
      },
      changeImgFile (file) {
          let reader = new FileReader();
          reader.readAsDataURL(file.raw);
          reader.onload =  () => {
            this.imgData.base64Str = reader.result.split(',')[1];
          }
          this.imgData.id = file.uid;
          this.imgData.fileOriginName = file.name;
          this.imgData.fileType = file.name.split('.')[1];
      },
      custom (file) {
        this.$message({
           showClose: true,
           message: '图片正常在上传请稍后.......',
           type: 'warning'
         });
        var data = {
          base64Str : this.imgData.base64Str,
          fileOriginName : this.imgData.fileOriginName,
          fileType : this.imgData.fileType,
          id : this.imgData.id,
        }
        upLoadingImg(data).then(res=>{
          if (res.data.code == 'OK') {
              this.$message.success('上传图片成功');
              this.pageData.qualityUserAvatar = res.data.data.fileURL

          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      upForm (method) {
        this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              let data = {
                qualityUserName : this.pageData.qualityUserName,
                qualityType : this.pageData.qualityType,
                qualityUserAvatar : this.pageData.qualityUserAvatar,
                qualityUserDesc : this.pageData.qualityUserDesc,
                qualityNum :this.pageData.qualityNum,
                qualityPercent :this.pageData.qualityPercent,
                qualityUserId :this.pageData.qualityUserId
              }
              addQualityUser(data,method).then(res=>{
                if (res.data.code == 'OK') {
                    this.dialog = false;
                    if (method == 'post') {
                        this.$message.success('新增成功');
                          this.getqualityUserList();
                    } else {
                       this.$message.success('编辑成功');
                         this.getqualityUserList();
                    }
                 } else {
                   this.$message.error(res.data.message);
                 }
              })
            }
        })
      }
    }
  }
</script>

<style scoped>
  @import "../../../../styles/common.css";
</style>
